<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- web app, hybrid app, native app -->
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
		<title>视口设置（理想视口）</title>
		<style>
			* {
			    box-sizing: border-box;
			}
			body {
			    font-family: Arial, sans-serif;
			    margin: 0;
			}
			.header, .footer {
			    background-color: #333;
				height: 100px;
			}
			.container {
				display: flex;
			    margin: 0;
				height: 350px;
			}
			.aside-l {
			    background-color: red;
			}
			.main {
				background-color: green;
			}
			.aside-r {
			    background-color: blue;
				
			}
			@media (min-width: 999px) {
			    .container {
					
			    }
				.aside-l, .aside-r {
				    width: 25%; 
					height: 100%;
				}
				.main{
					flex: 1;
					width: 50%;
					height: 100%;
					order: 2;
				}
				.aside-l{
					order: 1;
				}
				.aside-r{
					order: 3;
				}
			}
			@media (max-width: 998px) and (min-width: 768px) {
			    .container {
					flex-wrap: wrap
			    }
			    .aside-l, .aside-r {
			        width: 50%; 
					height: 125px;
			    }
				.main{
					width: 100%;
					height: 225px;
				}
			}
			@media (max-width: 767px) {
			    .container {
			        flex-direction: column; /* 纵向布局 */
			    }
			    .aside-l, .aside-r {
			        width: 100%; /* 全宽 */
					height: 100px;
			    }
				.main{
					height: 150px;
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="header">
				
			</div>
			<div class="container">
				<div class="aside-l"></div>
				<div class="aside-r"></div>
				<div class="main"></div>
			</div>
			<div class="footer">
				
			</div>
		</div>
		
	</body>
</html>